<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title th:text="${post.title}">Post Title</title>
  <!-- Add references to your CSS files here -->
  <style>
        body {
            font-family: Arial, sans-serif;
        }
        .comments-section {
            margin-top: 2rem;
        }
        .comment {
            border-bottom: 1px solid #ccc;
            padding: 1rem 0;
        }
        .comment:last-child {
            border-bottom: none;
        }
        .comment-author {
            font-weight: bold;
            color: #555;
        }
        .comment-content {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .comment-timestamp {
            font-size: 0.8rem;
            color: #999;
        }
        .comment-delete-link {
            text-decoration: none;
            color: #007bff;
            cursor: pointer;
        }
        .add-comment-form {
            margin-top: 2rem;
        }
        .add-comment-form input[type="text"],
        .add-comment-form textarea {
            width: 100%;
            margin-bottom: 1rem;
            padding: 0.5rem;
            box-sizing: border-box; /* Makes sure padding does not affect width */
        }
        .add-comment-form button {
            background-color: #007bff;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.3rem;
            cursor: pointer;
        }
        .add-comment-form button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<header>
  <h1 th:text="${post.title}">Post Title</h1>
</header>

<article>
  <p th:text="${post.content}">Post content goes here...</p>
</article>
<!-- ... existing post detail HTML ... -->

<div class="comments-section">
  <h3>Comments</h3>
  <div th:each="comment : ${comments}" class="comment">
    <div class="comment-author" th:text="${comment.authorName}">Author Name</div>
    <div class="comment-content" th:text="${comment.content}">Comment Content</div>
    <div class="comment-timestamp" th:text="${#dates.format(comment.creationDate, 'yyyy-MM-dd HH:mm')}">Timestamp</div>
    <!-- Delete comment link, handle with authorization in the future -->
    <a th:href="@{/post/{postId}/comments/{commentId}/delete(postId=${post.id}, commentId=${comment.id})}" class="comment-delete-link">Delete</a>
  </div>
</div>

<div class="add-comment-form">
  <h4>Add a Comment</h4>
  <form th:action="@{/post/{postId}/comments(postId=${post.id})}" th:object="${newComment}" method="post">
    <input type="text" th:field="*{authorName}" placeholder="Your Name" required />
    <textarea th:field="*{content}" placeholder="Write your comment here" required></textarea>
    <button type="submit">Submit Comment</button>
  </form>
</div>


<footer>
  <p>Blog System Demo</p>
</footer>
</body>
</html>
